From 4df5503f3e06761a7096324f8e093ab4c1afefa7 Mon Sep 17 00:00:00 2001
From: eug-vs <eugene@eug-vs.xyz>
Date: Fri, 23 Sep 2022 13:14:11 +0300
Subject: feat: add emoji plugin

---
 src/pages/[...path].tsx | 35 ++++++++++++++++++++++++++---------
 1 file changed, 26 insertions(+), 9 deletions(-)

(limited to 'src/pages/[...path].tsx')

diff --git a/src/pages/[...path].tsx b/src/pages/[...path].tsx
index 30fdcd6..9c7704e 100644
--- a/src/pages/[...path].tsx
+++ b/src/pages/[...path].tsx
@@ -1,12 +1,15 @@
 import _ from 'lodash';
-import type { GetStaticPropsContext, NextPage } from "next";
+import type { GetStaticPropsContext, NextPage } from 'next';
 import ReactMarkdown from 'react-markdown';
-import Head from "next/head";
-import deepReadDir from "../deepReadDir";
+import Head from 'next/head';
+import Emoji from '../Emoji';
+import deepReadDir from '../deepReadDir';
+import emojiPlugin from '../emojiPlugin';
 import fs from 'fs';
 
 
 const MARKDOWN_DIR = '../eug-vs-xyz/src';
+const EMOJI_DIR = 'public/emoji';
 
 const transformLinkURI = (uri: string): string => {
   return uri.match(/(.*)\.md/)?.[1] || uri;
@@ -15,9 +18,12 @@ const transformLinkURI = (uri: string): string => {
 export const getStaticProps = async (context: GetStaticPropsContext) => {
   const path = _.isArray(context.params?.path) && context.params?.path || [context.params?.path];
   const markdownSource = fs.readFileSync(`${MARKDOWN_DIR}/${path?.join('/')}.md`).toString();
+  const emojiFileNames = fs.readdirSync(EMOJI_DIR);
+
   return {
     props: {
       markdownSource,
+      emojiFileNames,
       path,
     }
   }
@@ -30,23 +36,34 @@ export const getStaticPaths = async () => {
     .filter(p => p)
     .map(p => p?.split('/'))
     .map(path => ({ params: { path } }));
-  console.log(paths);
   return {
     paths,
     fallback: false,
   }
 }
 
-const Page: NextPage = ({ markdownSource }: any) => {
+const Page: NextPage = ({ markdownSource, emojiFileNames }: any) => {
   return (
     <>
       <Head>
-        <title>Create T3 App</title>
-        <meta name="description" content="Generated by create-t3-app" />
-        <link rel="icon" href="/favicon.ico" />
+        <title>{`Eugene's Space`}</title>
+        <meta name="description" content="TODO" />
+        <link rel="icon" href="/icon-64.png" />
       </Head>
       <main>
-        <ReactMarkdown transformLinkUri={transformLinkURI}>{markdownSource}</ReactMarkdown>
+        <ReactMarkdown
+          children={markdownSource}
+          transformLinkUri={transformLinkURI}
+          rehypePlugins={[emojiPlugin(emojiFileNames)]}
+          components={{
+            emoji: Emoji,
+            h1: 'h2',
+            h2: 'h3',
+            h3: 'h4',
+            h4: 'h5',
+            h5: 'h6',
+          } as any}
+        />
       </main>
     </>
   );
-- 
cgit v1.2.3

